<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/valid-template-root -->
<template>
  <div>
    <div class="app">
      <div class="login-container">
        <div class="el-form login-form el-form--label-left">
          <div class="title-container">
            <img
              src="http://pinda.itheima.net/static/img/logo1.2459363d.png"
              alt=""
            />
          </div>
          <span>
            <el-form :model="form" :rules="rules">
              <!-- 用户名输入文本框 -->
              <el-form-item prop="loginName">
                <el-input placeholder="请输入用户名" v-model="form.loginName">
                  <i slot="prefix" class="el-icon-mobile-phone"></i>
                </el-input>
              </el-form-item>
              <!-- 密码输入文本框 -->
              <el-form-item prop="password">
                <el-input
                  show-password
                  type="password"
                  placeholder="请输入密码："
                  v-model="form.password"
                >
                  <i slot="prefix" class="el-icon-key"></i>
                </el-input>
              </el-form-item>
              <!-- 验证码输入文本框 -->
              <el-form-item prop="code">
                <el-col :span="17">
                  <el-input v-model="form.code" placeholder="验证码">
                    <i slot="prefix" class="el-icon-lock"></i>
                  </el-input>
                </el-col>
                <el-col :span="7">
                  <img @click="getCode" class="ps" :src="src" alt="" />
                </el-col>
              </el-form-item>
              <el-form-item class="tc">
                <el-button
                  class="login"
                  style="width: 100%"
                  @click="login"
                  type="primary"
                  >立即登录</el-button
                >
              </el-form-item>
            </el-form>
          </span>
        </div>

        <span class="login-footer">© 2020 - 品达物流集团</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode } from '@/api/login'
export default {
  data () {
    return {
      form: {
        loginName: 'pinda',
        password: '123456',
        code: ''
      },
      rules: {
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur', 'change']
          }
        ],
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          },
          {
            min: 5,
            max: 11,
            message: '长度5~11哦',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\w{5,11}$/,
            message: '长度5~11哦',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  created () {
    this.loadCode()
  },
  methods: {
    async loadCode () {
      const res = await getCode()
      console.log(res)
    },
    login () {}
    // getCode () {}
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  background: url("http://pinda.itheima.net/static/img/background.902e6b43.png")
    100% no-repeat;
  background-size: 100% 100%;
  width: 65%;
  height: 100vh;
  .login-footer {
    position: fixed;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1rem;
    height: 1rem;
  }
  .login-form {
    position: absolute;
    top: 40%;
    left: 78%;
    margin: -180px 0 0 -160px;
    width: 463px;
    height: 440px;
    padding: 36px 0;
    background: #fff;
    border-radius: 3px;
    .title-container {
      position: relative;
      margin-bottom: 53px;
      text-align: center;
    }
  }
}
::v-deep .el-input__inner {
  padding-left: 48px;
  line-height: 54px;
  height: 54px;
  border-radius: 5px;
}
::v-deep .el-input__prefix {
  line-height: 54px;
  font-size: 20px;
  padding-left: 12px;
  padding-right: 26px;
}
::v-deep .el-button--primary {
  width: 100%;
  height: 54px;
  margin-bottom: 14px;
  margin-top: 30px;
  background-image: linear-gradient(
    to right,
    rgb(217, 46, 44),
    rgb(248, 110, 43)
  );
  border: 0px;
  font-size: 20px;
}
</style>
